import type { JSX } from "solid-js";
import { cn } from "@/common/cn";

export type ButtonShape = "round" | "circle" | "default";
export type ButtonVariant = "primary" | "secondary" | "danger" | "outline";
export type ButtonSize = "sm" | "md" | "lg";

type ButtonProps = {
  onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined;
  children?: JSX.Element | undefined;
  class?: string | undefined;
  shape?: ButtonShape | undefined;
  variant?: ButtonVariant | undefined;
  size?: ButtonSize | undefined;
  disabled?: boolean | undefined;
  type?: "button" | "submit" | "reset" | undefined;
};

/**
 * 基本事件示例
 */
export default function Button(p: ButtonProps) {
  const shapeClass = () => {
    switch (p.shape) {
      case "circle":
        return "rounded-full";
      case "round":
        return "rounded-full";
      default:
        return "rounded-md";
    }
  };

  const variantClass = () => {
    switch (p.variant) {
      case "secondary":
        return "bg-gray-500    border-gray-100 text-white hover:bg-gray-600 hover:ring-gray-300";
      case "danger":
        return "bg-red-500     border-red-100  text-white hover:bg-red-600  hover:ring-red-300";
      case "outline":
        return "bg-transparent border-gray-400            hover:bg-gray-100 hover:ring-gray-300";
      default:
        return "bg-blue-500    border-blue-100 text-white hover:bg-blue-600 hover:ring-blue-300";
    }
  };

  const disableClass = () => {
    if (p.disabled) {
      return "cursor-not-allowed opacity-50";
    }

    switch (p.variant) {
      case "secondary":
        return "active:bg-gray-700";
      case "danger":
        return "active:bg-red-700";
      case "outline":
        return "active:bg-gray-200";
      default:
        return "active:bg-blue-700";
    }
  };

  const sizeClass = () => {
    switch (p.size) {
      case "sm":
        return "px-2 py-1 h-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 text-lg";
      default:
        return "px-4 py-2 h-10 text-sm";
    }
  };

  const circleSizeClass = () => {
    if (p.shape === "circle") {
      switch (p.size) {
        case "sm":
          return "p-0 w-8";
        case "lg":
          return "p-0 w-12";
        default:
          return "p-0 w-10";
      }
    }

    return null;
  };

  return (
    <button
      onClick={p.onClick}
      type={p.type || "button"}
      class={cn(
        "hover:ring-2 border flex items-center justify-center",
        sizeClass(),
        circleSizeClass(),
        shapeClass(),
        variantClass(),
        disableClass(),
        p.class,
      )}
      disabled={p.disabled}
    >
      {p.children}
    </button>
  );
}
